<template>
	<div class="juservicecontainer">	
		<div class="header">
			<img class="plc":src="serviceData[0]" alt="">
			<div class="youhui">
				<img class= "pic1" :src="youhuiData[0]" alt="">
				<span class="s1">首次冲100送200</span>
				<span  class="s2">立即充值</span>
				<img class= "pic2" :src="youhuiData[1]" alt="">
			</div>
		</div>
		<div class="details">
			<ul>
				<li  v-for="(item,index) in categoryArr" :key="index" >
					<div class="left">
						<img class="deimg" :src="item.imgUrl" alt="">
					</div>
					<div class="right">
						<p>{{item.title}}</p>
						<p class="te">{{item.des}}</p>
					</div>
				</li>
			</ul>	
		</div>
	</div>
</template>
<script>

export default{
	name:'yijuservice',
	data(){
		return{

		}
	},
	props:{
			serviceData:{
				type:Array,
				default:function(){
					return[
						require("../../../assets/images/serviceimg/jiaxiu (5).png"),
					]
				}
			},
			youhuiData:{
				type:Array,
				default:function(){
					return[
						require("../../../assets/images/serviceimg/icon_youhui@2x.png"),
						require("../../../assets/images/serviceimg/jt_03.png")
					]
				}
			},			
			categoryArr:{
				type:Array,
				default:function(){
					return[
					{
						title:"宜居保洁",
						des:"您的专项周末保洁",
						imgUrl:require("../../../assets/images/serviceimg/tu1.png")
					},
					{
						title:"日常保洁",
						des:"您的专项周末保洁",
						imgUrl:require("../../../assets/images/serviceimg/tu1.png")
					},
					{
						title:"专业除螨",
						des:"您的专项周末保洁",
						imgUrl:require("../../../assets/images/serviceimg/tu1.png")
					},
					{
						title:"擦玻璃",
						des:"您的专项周末保洁",
						imgUrl:require("../../../assets/images/serviceimg/tu1.png")
					}
				]
				}
			}
		}
}	
</script>
<style scoped lang='less'>
.juservicecontainer{
		width:100%;
		background-color: #e6e6e6;
		.header{
			width: 100%;
			height: 570/2/50rem;
			img{
				width: 100%;
				height: 470/2/50rem;
			}
			.youhui{
				width: 100%;
				height:100/2/50rem;
				background-color: #e6e6e6;
				text-align: center;
				line-height: 100/2/50rem;
				.pic1{
					width: 80/2/50rem;
					height:40/2/50rem;

				};
				.pic2{
					width: 10/2/50rem;
					height:20/2/50rem;
				}
				.s1{
					padding-right:220/2/50rem; 
				}
				.s2{
					padding-right:50/2/50rem; 
				}
			}
		}
		
		.details{
			width: 100%;
			ul{
				width: 100%;
				overflow: hidden;

			}
			li{
				width: 95%;
				height: 200/2/50rem;
				margin-bottom: 2%;
				margin-left:2%;
				background-color: #ffffff;
				border-radius: 20/2/50rem;
				.left{
					float: left;
					img{
						width: 240/2/50rem;
						margin-top: 20/2/50rem;
						margin-left: 20/2/50rem;
					}
				}
				.right{
					float: left;
					p{
						margin-top: 30/2/50rem;
						margin-left: 70/2/50rem;
						width: 350/2/50rem;
						font-size: 40/2/50rem;
						color: #585858;
					}
					.te{
						font-size: 20/2/50rem;
						color: #737373;
					}
				}		
			}
				
		}

}	

</style>